<template>
  <div>
    <canvas id="jobcontainer" width="345" height="190"></canvas>
  </div>
</template>

<script>
import F2 from '@antv/f2'

export default {
  props: ['jobChartList'],
  methods: {
    renders () {
      const data = this.jobChartList
      const chart = new F2.Chart({
        id: 'jobcontainer',
        pixelRatio: window.devicePixelRatio
      })
      chart.source(data, {
        date: {
          tickCount: 10,
          range: [0, 1]
        },
        value: {
          tickCount: 5,
          min: 0
        }
      })

      chart.axis('date', {
        label: {
          rotate: -Math.PI / 2,
          textAlign: 'end',
          textBaseline: 'middle'
        }
      })
      chart.tooltip({
        showCrosshairs: true
      })

      chart
        .area()
        .position('date*value')
        .color('l(90) 0:#1890FF 1:#f7f7f7')
        .shape('smooth')
      chart
        .line()
        .position('date*value')
        .color('pink')
        .shape('smooth')
      chart.render()
    }
  },
  watch: {
    jobChartList (val) {
      this.renders()
    }
  }
}
</script>

<style></style>
